<!--
 * @Author: taoke
 * @Date: 2022-05-06 09:36:13
 * @LastEditors: taoke
 * @LastEditTime: 2022-05-25 08:51:25
 * @Description: 
 * @FilePath: \yunying-sys-cli4\src\components\partner\relation\components\detailDialog.vue
-->
<template>
  <el-dialog
    title="金额详情"
    class="dialog"
    :visible="visible"
    @close="handleClose"
  >
    <div class="total-label">
      <label>邀请人: {{ viewRow.name === 'root' ? '' : viewRow.name }}</label>
      <label>收益金额: {{ headTotal.amount }}元</label>
      <label>未发放: {{ headTotal.notGrantAmount }}元</label>
    </div>
    <el-table :data="tableData" style="width: 100%;" border>
      <el-table-column
        prop="userBInTime"
        label="邀请时间"
        width="140"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="userBe.userName"
        label="被邀请人"
        width="140"
        align="center"
      >
      </el-table-column>
      <el-table-column
        label="当前课程状态"
        prop="courseStatus"
        min-width="180"
        align="center"
        :formatter="courseStatusFormatter"
      >
      </el-table-column>
      <el-table-column
        prop="orderStatus"
        label="当前订单状态"
        width="120"
        align="center"
        :formatter="orderStatusFormatter"
      >
      </el-table-column>
      <el-table-column
        prop="bonusStatus"
        label="发放状态"
        width="120"
        align="center"
        :formatter="bonusStatusFormatter"
      >
      </el-table-column>
      <el-table-column prop="bonus" label="金额" width="80" align="center">
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
  </el-dialog>
</template>

<script>
import { sysNormalDisable } from '@utils/dictionariesFunc'
import { formatterValueByDict, formatterValueByOptions } from '@utils/table'
import {
  courseStatusOptions,
  orderStatusOptions
} from '@/components/partner/types/selectOptions'
import { getDetailByUserId } from '@/api/partner/invitedRecord'
import { getAmount } from '@/api/partner/award'
import { tablePaginationMixin } from '@/mixins/tablePaginationMixin'
export default {
  name: 'relation-detailDialog',
  mixins: [tablePaginationMixin],
  data() {
    return {
      bonusStatusOptions: [],
      visible: false,
      viewRow: {},
      headTotal: {
        amount: 0, // 合计发放金额
        notGrantAmount: 0 // 未到账金额
      },
      tableData: []
    }
  },
  methods: {
    async getDict() {
      // 获取发放状态
      this.bonusStatusOptions = await sysNormalDisable(
        'partner_award_grant_status'
      )
    },
    initTotal() {
      const params = {
        dpAccount: this.viewRow.dpAccount
      }
      getAmount(params, (response) => {
        this.headTotal = response
      })
    },
    searchList() {
      this.loading = true
      const params = Object.assign(
        { userId: this.viewRow.id },
        this.searchParams
      )
      getDetailByUserId(
        params,
        (response) => {
          this.tableData = response.rows
          this.total = response.total
          this.loading = false
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    async show(data) {
      this.viewRow = data
      await this.getDict()
      this.searchList()
      this.initTotal()
      this.visible = true
    },
    courseStatusFormatter(_row, _column, cellValue) {
      return formatterValueByOptions({
        cellValue,
        options: courseStatusOptions
      })
    },
    orderStatusFormatter(_row, _column, cellValue) {
      return formatterValueByOptions({
        cellValue,
        options: orderStatusOptions
      })
    },
    bonusStatusFormatter(_row, _column, cellValue) {
      return formatterValueByDict({
        cellValue,
        options: this.bonusStatusOptions
      })
    },
    handleClose() {
      this.visible = false
    }
  }
}
</script>
<style lang="less" scoped>
.dialog {
  :deep(.el-dialog) {
    width: 931px !important;
  }
  :deep(.el-dialog__body) {
    padding: 15px 30px 25px 20px !important;
  }
}
.total-label {
  display: flex;
  justify-content: center;
  margin-bottom: 5px;
  label {
    font-size: 18px;
    font-weight: 600;
    margin-right: 10px;
  }
}
</style>
